<template>
  <div>
    <el-form-item label="一般固废">
      <el-radio-group v-model="value.solidWasteStatus" :disabled="disabled" @input="handleChange">
        <el-radio v-for="item in dict.type.env_system_has_or_not" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="value.solidWasteStatus === '有'">
      <el-form-item label="一般固废仓库面积">
        <el-input v-model="value.solidWasteArea" :disabled="disabled" class="input" placeholder="请输入仓库面积" @change="handleChange" />m2
      </el-form-item>

      <table class="pars-table" style="width: 1000px">
        <thead>
          <tr>
            <th>一般固废名称</th>
            <th>数量（吨）</th>
            <th>合同签署情况</th>
            <th>到期时间</th>
            <th v-if="!disabled" class="operation">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in data" :key="row.id">
            <th>
              <el-input v-model="row.solidName" :disabled="disabled" placeholder="请输入名称" @change="handleChange" />
            </th>
            <th>
              <el-input v-model="row.solidNum" :disabled="disabled" placeholder="数量" @change="handleChange" />
            </th>
            <th>
              <el-select v-model="row.status" :disabled="disabled" placeholder="请选择" @change="handleChange">
                <el-option
                  v-for="dict in dict.type.env_contract_sign_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </th>
            <th>
              <el-date-picker
                v-model="row.deadline"
                :disabled="disabled"
                type="date"
                format="yyyy年MM月dd日"
                placeholder="选择时间"
                @change="handleChange"
              />
            </th>
            <th v-if="!disabled">
              <i class="el-icon-remove icon remove" @click="handleRemove(index)" />
              <i class="el-icon-circle-plus icon add" @click="handleAdd(index)" />
            </th>
          </tr>
        </tbody>
      </table>
    </template>
  </div>
</template>
<script>
import { parSettingMixin } from '@/utils/mixins'
import { formatDatetime } from '@/utils'

export default {
  name: 'WasteSolid',
  mixins: [parSettingMixin],
  dicts: ['env_system_has_or_not', 'env_contract_sign_status'],
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data: this.value && this.value.solidWasteItems && this.value.solidWasteItems.length > 0
        ? this.value.solidWasteItems
        : [{ solidName: '', solidNum: '', status: '', deadline: '' }],
      keys: ['solidName', 'solidNum', 'status', 'deadline']
    }
  },
  watch: {
    value(val) {
      this.data = val && val.solidWasteItems && val.solidWasteItems.length > 0 ? val.solidWasteItems : [this.getEmptyRow()]
    }
  },
  methods: {
    handleChange() {
      const data = {
        ...this.value,
        solidWasteItems: this.data.map(item => {
          if (item.deadline) item.deadline = formatDatetime(item.deadline, 'YYYY-MM-DDTHH:mm:ss')
          return item
        })
      }
      this.$emit('input', data)
      this.$emit('change', data)
    }
  }
}
</script>
